<template>
    <div class="wrapper">
        <div class="top">
            <text class="hits">人气值</text>
            <text class="hits">1123</text>
        </div>
        <div class="down">
            <text class="tip">直播</text>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        data () {
            return {}
        },
        methods: {},
        created () {

        }
    }
</script>

<style scoped>
    .wrapper {
        width: 120px;
        height: 300px;
    }
    .top {
        background-color: orangered;
        
        flex: 3;
        justify-content: center;
        align-items: center;
        /* 阴影在0.11+支持 */
        box-shadow: 10px 5px black;
    }
    .down {
        
        /*height: 100px;*/
        flex: 1;
        justify-content: center;
        align-items: center;
        border-width: 10px;
        border-style: solid;
        border-color: orange;
        border-radius: 10px;
        margin-top: 20px;
    }
    .hits  {
        color: white;
        font-size: 36px;
    }
    .tip {
        color: white;
        font-size: 36px;
    }
</style>
